<template>
  <div>
    <el-button type="primary" @click="onIsShows" size="mini" style="float:right;margin: 20px 30px 0 0">返回</el-button>
    <div>
      <el-button type="primary" size="mini"  style="margin: 20px 0 0 30px" @click="cretedInfoDtail(0)">保存</el-button>
      <el-button type="primary" size="mini"  style="margin: 20px 0 0 10px" @click="cretedInfoDtail(1)">保存并提交</el-button>
      <el-card style="margin:7px 30px 20px">
        <div slot="header">入库信息</div>
        <div>
          <el-row>
            <el-col :span="1" style="line-height:40px">仓库：</el-col>
            <el-col :span="3">
              <el-input :value="wareList.filter(item => item.id == this.$props.menuActiveName)[0].whName" :disabled="true" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="1" style="line-height:40px;margin-left:10px">货权方：</el-col>
            <el-col :span="4">
              <el-input v-model="cargoOwner.dictName" :disabled="true" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="1.4" style="line-height:40px;margin-left:10px">结算客户：</el-col>
            <el-col :span="4">
              <el-input v-model="settlementCustomer" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>
        </div>
      </el-card>
       <el-card style="margin:20px 30px">
        <div slot="header">入库箱信息</div>
        <div>
            <el-button type="primary" size="mini" @click="boxInformation">新增</el-button>
            <el-button type="primary" size="mini" @click="batchDelete">批量删除</el-button>
            <el-button type="primary" size="mini" >导出模板</el-button>
            <el-button type="primary" size="mini" >导入</el-button>
            <el-table
              :data="tableData.tableInfo"
              @row-click="handleOnChange"
              highlight-current-row
              @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                v-for="item in tableData.cloumns"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                align="center"
                :width="item.width">
                <template  slot-scope="scope">
                  <div v-if="item.type == 'input'">
                    <el-input v-model="scope.row[item.prop]" size="mini" placeholder="请输入内容"></el-input>
                  </div>
                  <div v-else-if="item.type == 'select'">
                    <el-select v-model="scope.row[item.prop]" size="mini" placeholder="" @change="changesInfo">
                      <el-option
                        v-for="busi in businessList"
                        :key="busi.id"
                        :label="busi.dictName"
                        :value="busi.dictValue">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-else-if="item.type == 'date'">
                    <el-date-picker
                      v-model="scope.row[item.prop]"
                      type="date"
                      size="mini"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div v-else-if="item.type == 'radio'">
                    <el-checkbox v-model="scope.row[item.prop]"></el-checkbox>
                  </div>
                </template>
              </el-table-column>
              <el-table-column  fixed="right" label="操作" width="200" align="center" >
                <template slot-scope="scope">
                  <div style="display: flex;justify-content: center">
                     <el-button type="text" size="mini" @click.native.prevent="boxCretedInfo(scope.$index,tableData.tableInfo)">新增货物信息</el-button>
                     <el-button type="text" size="mini" @click.native.prevent="boxDelete(scope,tableData.tableInfo)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
        </div>
      </el-card>
      <el-card style="margin:20px 30px">
        <div slot="header">货物信息</div>
        <div>
            <el-button type="primary" size="mini" @click="goodsInformation">新增</el-button>
            <el-button type="primary" size="mini"  @click="batchDeletes">批量删除</el-button>
            <el-table
              :data="tableData.tableInfoList"
              @selection-change="handleSelectionChanges"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                v-for="item in tableData.goodsCloumns"
                :key="item.prop"
                align="center"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
                <template  slot-scope="scope">
                  <div v-if="item.type == 'input'">
                    <el-input v-model="scope.row[item.prop]" size="mini" placeholder="请输入内容"></el-input>
                  </div>
                  <div v-else-if="item.type == 'select'">
                    <div v-if="item.prop == 'matTypCode'">
                    <el-select v-model="scope.row[item.prop]"  size="mini"  placeholder="" @change="changesInfos($event,scope.row)">
                      <el-option
                        v-for="keys in scope.row.categoryList"
                        :key="keys.id"
                        :label="keys.dictName"
                        :value="keys.dictValue">
                      </el-option>
                    </el-select>
                   </div>
                   <div v-if="item.prop == 'matName'">
                    <el-select v-model="scope.row[item.prop]"  size="mini"  placeholder="">
                      <el-option
                        v-for="keys in scope.row.categoryLists"
                        :key="keys.matCode"
                        :label="keys.matName"
                        :value="keys.matCode">
                      </el-option>
                    </el-select>
                   </div>
                  </div>
                  <div v-else-if="item.type == 'date'">
                    <el-date-picker
                      v-model="scope.row[item.prop]"
                      type="date" size="mini" 
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div v-else>
                    <el-input v-model="scope.row[item.prop]" size="mini" placeholder="请输入内容"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column  fixed="right"  width="100"  label="操作" align="center">
                <template  slot-scope="scope">
                  <el-button type="text" size="mini" @click.native.prevent="boxDtailDelete(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {WarehousingCreted, getBoxInfoWarehousing, getBusinessInfo, getCategoryInfo, getBusinessInfos} from '@/api/planInfo.js'
import baseCodeApi from '@/api/baseCode';
import { v4 as uuidv4 } from 'uuid'
export default {
  props:{
    menuActiveName:{
      type:String,
      default:''
    },
    wmsUrl:{
      type:String,
      default:''
    },
    wareList:{
      type:Object,
      default:() => {}
    }
  },
data() {
  return {
    tableData:{
        tableInfo:[],
        tableInfoList:[],
        cloumns:[{
          prop: "billOfLandingNo",
          label: "提单号",
          type: 'input',
          width: "200"
        },{
          prop: "containerNum",
          type: 'input',
          label: "箱号",
          width: "150"
        },{
          prop: "shipName",
          label: "船名",
          type: 'input',
          width: "150"
        },{
          prop: "voyageNum",
          label: "航次",
          type: 'input',
          width: "150"
        },{
          prop: "batchNum",
          label: "批次号",
          type: 'input',
          width: "150"
        },{
          prop: "contractNo",
          label: "合同号",
          type: 'input',
          width: "150"
        },{
          prop: "carNo",
          label: "送货车号",
          type: 'input',
          width: "150"
        },{
          prop: "driver",
          label: "送货司机",
          type: 'input',
          width: "150"
        },{
          prop: "driverTel",
          label: "司机联系方式",
          type: 'input',
          width: "150"
        },{
          prop: "businessType",
          label: "业务类型",
          type: 'select',
          width: "150"
        },{
          prop: "inEstimateDate",
          label: "预计送货日期",
          type: 'date',
          width: "300"
        },{
          prop: "intoSeparationChargeSign",
          label: "分色",
          type: 'radio',
          width: "100"
        },{
          prop: "authenticateFlag",
          label: "出库密钥",
          type: 'radio',
          width: "100"
        },{
          prop: "remark",
          label: "备注",
          type: 'input',
          width: "200"
        },],
        goodsCloumns:[{
          prop: "matTypCode",
          label: "品类",
          type: 'select',
          width: "150"
        },{
          prop: "matName",
          label: "品名",
          type: 'select',
          width: "220"
        },{
          prop: "county",
          label: "国别",
          type: 'input',
          width: "150"
        },{
          prop: "factoryCode",
          label: "厂号",
          type: 'input',
          width: "200"
        },{
          prop: "packName",
          label: "货物规格",
          type: 'input',
          width: "180"
        },{
          prop: "packFormat",
          label: "包装规格",
          type: 'input',
          width: "180"
        },{
          prop: "orderQty",
          label: "件数",
          width: "180"
        },{
          prop: "orderWeight",
          label: "重量",
          width: "200"
        },{
          prop: "validatePeriod",
          label: "保质期（月）",
          type: 'input',
          width: "180"
        },{
          prop: "dateGen",
          label: "生产日期",
          type: 'date',
          width: "300"
        },{
          prop: "ifCodeReading",
          label: "抄码",
          width: "150"
        },{
          prop: "codeQty",
          label: "抄码件数",
          width: "150"
        }],
       tableList:[{
          cargoOwner:"100081",
          settlementCustomer:"人工搬运",
          billOfLandingNo:"UIUI74125896",
          containerNum:"RQ",
          containerSize:"40",
          shipName:"",
          voyageNum:"",
          batchNum:"",
          contractNo:"",
          inEstimateDate:"",
          carNo:"",
          driver:"",
          driverTel:"",
          intoSeparationChargeSign:"",
          authenticateFlag:"",
          remark:"",
          list:[
              {
                  matCode:"20210925022",
                  matName:"现场测试品名",
                  matTypCode:"9999",
                  county:"",
                  factoryCode:"",
                  packFormat:"",
                  orderQty:1,
                  orderWeight:2,
                  productStatus:"",
                  dateGen:"",
                  validatePeriod:"",
                  ifCodeReading:"",
                  codeQty:""
              }
          ]
       }]
    },
  value: '',
  multipleSelection:[],
  multipleSelections:[],
  isCreted:false,
  settlementCustomer:'',
  businessList:[],
  categoryList:[],
  categoryLists:[],
  dictInfo:[],
  cargoOwner:{}
  }
},
methods: {
  changesInfos(row,rows){
    getBusinessInfos({matTypCode:row},this.$props.wmsUrl).then(res =>{
          this.$set(rows,'categoryLists', res.data.returnData)
          //  if(rows.matCode != ''){
          //    rows.matCode = ''
          //  }
        })
      console.log(res)
  },
  changesInfo(row){
    if(row == 'move'){
    this.tableData.cloumns = [{
          prop: "billOfLandingNo",
          label: "提单号",
          type: 'input',
          width: "200"
        },{
          prop: "containerNum",
          type: 'input',
          label: "箱号",
          width: "150"
        },{
          prop: "shipName",
          label: "船名",
          type: 'input',
          width: "150"
        },{
          prop: "voyageNum",
          label: "航次",
          type: 'input',
          width: "150"
        },{
          prop: "batchNum",
          label: "批次号",
          type: 'input',
          width: "150"
        },{
          prop: "contractNo",
          label: "合同号",
          type: 'input',
          width: "150"
        },{
          prop: "carNo",
          label: "送货车号",
          type: 'input',
          width: "150"
        },{
          prop: "driver",
          label: "送货司机",
          type: 'input',
          width: "150"
        },{
          prop: "driverTel",
          label: "送货司机联系方式",
          type: 'input',
          width: "200"
        },{
          prop: "businessType",
          label: "业务类型",
          type: 'select',
          width: "150"
        },{
          prop: "outCarNo",
          label: "提货车号",
          type: 'input',
          width: "150"
        },{
          prop: "outDriver",
          label: "提货司机",
          type: 'input',
          width: "150"
        },{
          prop: "outTel",
          label: "提货司机联系方式",
          type: 'input',
          width: "200"
        },{
          prop: "inEstimateDate",
          label: "预计送货日期",
          type: 'date',
          width: "300"
        },{
          prop: "intoSeparationChargeSign",
          label: "分色",
          type: 'radio',
          width: "100"
        },{
          prop: "authenticateFlag",
          label: "出库密钥",
          type: 'radio',
          width: "100"
        },{
          prop: "remark",
          label: "备注",
          type: 'input',
          width: "200"
    }]
    }else{
      this.tableData.cloumns = [{
          prop: "billOfLandingNo",
          label: "提单号",
          type: 'input',
          width: "200"
        },{
          prop: "containerNum",
          type: 'input',
          label: "箱号",
          width: "150"
        },{
          prop: "shipName",
          label: "船名",
          type: 'input',
          width: "150"
        },{
          prop: "voyageNum",
          label: "航次",
          type: 'input',
          width: "150"
        },{
          prop: "batchNum",
          label: "批次号",
          type: 'input',
          width: "150"
        },{
          prop: "contractNo",
          label: "合同号",
          type: 'input',
          width: "150"
        },{
          prop: "carNo",
          label: "送货车号",
          type: 'input',
          width: "150"
        },{
          prop: "driver",
          label: "送货司机",
          type: 'input',
          width: "150"
        },{
          prop: "driverTel",
          label: "司机联系方式",
          type: 'input',
          width: "150"
        },{
          prop: "businessType",
          label: "业务类型",
          type: 'select',
          width: "150"
        },{
          prop: "inEstimateDate",
          label: "预计送货日期",
          type: 'date',
          width: "300"
        },{
          prop: "intoSeparationChargeSign",
          label: "分色",
          type: 'radio',
          width: "100"
        },{
          prop: "authenticateFlag",
          label: "出库密钥",
          type: 'radio',
          width: "100"
        },{
          prop: "remark",
          label: "备注",
          type: 'input',
          width: "200"
        }]
    }

  },
  cretedInfoDtail(statusCode){
    this.tableData.tableInfo.forEach(item =>{
      item.cargoOwner = this.$utils.getUserInfo().entrustingPartyCode
      item.settlementCustomer = this.settlementCustomer
      item.status = statusCode
    })
    WarehousingCreted(this.tableData.tableInfo,this.$props.wmsUrl).then(res=>{
      console.log(res)
    })
  },
  onIsShows(){
    this.$emit('onIsShow');
  },
  boxInformation(){
    console.log(this.dictInfo)
    const boxId = uuidv4()
    this.tableData.tableInfo.push({boxId,list:[]})
  },
  boxDelete(scope,rows){
    console.log(this)
    rows.splice(scope.$index,1)
  },
  handleSelectionChange(val) {
    console.log(val)
    this.multipleSelection = val;
  },
  handleSelectionChanges(val) {
    console.log(val)
    this.multipleSelections = val;
  },
  boxCretedInfo(index,rows){
    console.log(rows[index].list)
    const goodsId = uuidv4()
    rows[index].list.push({goodsId,matCode:'20210925022',categoryList:this.categoryList})
    this.tableData.tableInfoList = rows[index].list
  },
  boxDtailDelete(scope){
    console.log(this.tableData.tableInfo)
    this.tableData.tableInfoList.splice(scope.$index,1)
  },
  handleOnChange(row,index){
    console.log(row,index)
    this.isCreted = true
    this.tableData.tableInfoList = row.list
  },
  goodsInformation(){
    if(this.isCreted){
      const goodsId = uuidv4()
      this.tableData.tableInfoList.push({goodsId,matCode:'20210925022',categoryList:this.categoryList})
    }else{
      this.$Message.error('请选择箱信息再创建');
    }
  },
  getBoxInfoDtail(){
      let body = {
        pageNum: 1, 
        pageSize: 50, 
        pageOptionsList: [
        50,
        100,
        200
        ],
        filterList: [], 
        sortList: [], 
        searchKey: "", 
        searchOrderType: "", 
        searchOrderTypeList: [], 
        notInMatTypeCodeList: [
        "9999",
        "0001"
        ] 
        }
  getBoxInfoWarehousing(body,this.$props.wmsUrl).then(({ data })=>{
    console.log(data)
  })
  },
  batchDelete(){
    console.log(this.tableData.tableInfo)
    this.multipleSelection.forEach(item=>{
    for(let i = 0; i < this.tableData.tableInfo.length;i++){
        if(item.boxId == this.tableData.tableInfo[i].boxId){
          this.tableData.tableInfo.splice(i,1);
        }    
        }
      })

  },
  batchDeletes(){
    for(let j = 0; j < this.multipleSelections.length;j++){
     for(let i = 0; i < this.tableData.tableInfoList.length;i++){
       if(this.multipleSelections[j].goodsId == this.tableData.tableInfoList[i].goodsId){
          this.tableData.tableInfoList.splice(i,1);
        }
    }}
  },
  getInfoInte(){
        baseCodeApi.getContractDictData().then(({ data }) => {
        if (data.returnCode === 200) {
            const { platformWarehouseList, customerList } = data.returnData;
            this.dictInfo.whCode = platformWarehouseList.map(i => {
                return {
                    dictName: i.whName,
                    dictValue: i.id
                };
            });
            this.dictInfo.customerId = customerList.map(i => {
                return {
                    dictName: i.customerName,
                    dictValue: i.id,
                    customerCode: i.customerCode
                };
            });
            this.cargoOwner = this.dictInfo.customerId.filter(item => item.dictValue == this.$utils.getUserInfo().entrustingParty)[0]
            this.settlementCustomer = this.cargoOwner.dictName
       } else {
            this.$Message.error(data.returnMsg);
        }
    }).catch(err => {
        console.log(err);
    });
    getBusinessInfo(this.$props.wmsUrl).then(res =>{
      this.businessList = res.data.returnData
    })
    getCategoryInfo(this.$props.wmsUrl).then(res =>{
      this.categoryList = res.data.returnData
    })
  }
},
mounted() {
  this.getInfoInte()
  console.log(this.$utils.getUserInfo())
   this.settlementCustomer = this.$utils.getUserInfo().entrustingParty
},
}
</script>

<style>

</style>